<template>
  <el-form
    ref="formRef"
    :model="formModel"
    :rules="rules"
    :label-width="labelWidth"
    class="dynamic-form"
  >
    <el-form-item
      v-for="field in schema"
      :key="field.prop"
      :label="field.label"
      :prop="field.prop"
      :rules="field.rules || []"
    >
      <!-- 输入框 -->
      <el-input
        v-if="field.component === 'Input'"
        v-model="formModel[field.prop]"
        :placeholder="field.placeholder"
        v-bind="field.componentProps"
        :style="field.style"
      />

      <!-- 文本展示 -->
      <span v-else-if="field.component === 'Text'" :style="field.style">
        {{ formModel[field.prop] }}
      </span>

      <!-- 下拉框 -->
      <el-select
        v-else-if="field.component === 'Select'"
        v-model="formModel[field.prop]"
        :placeholder="field.placeholder"
        v-bind="field.componentProps"
        :style="field.style"
      >
        <el-option
          v-for="opt in field.options || []"
          :key="opt.value"
          :label="opt.label"
          :value="opt.value"
        />
      </el-select>

      <!-- 单选框 -->
      <el-radio-group
        v-else-if="field.component === 'Radio'"
        v-model="formModel[field.prop]"
        v-bind="field.componentProps"
        :style="field.style"
      >
        <el-radio
          v-for="opt in field.options || []"
          :key="opt.value"
          :label="opt.value"
        >
          {{ opt.label }}
        </el-radio>
      </el-radio-group>

      <!-- 复选框 -->
      <el-checkbox-group
        v-else-if="field.component === 'Checkbox'"
        v-model="formModel[field.prop]"
        v-bind="field.componentProps"
        :style="field.style"
      >
        <el-checkbox
          v-for="opt in field.options || []"
          :key="opt.value"
          :label="opt.value"
        >
          {{ opt.label }}
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>

    <!-- 操作按钮 -->
    <el-form-item>
      <el-button class="btn-primary" type="primary" @click="handleSubmit"
        >提交</el-button
      >
      <el-button @click="handleReset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";

interface FieldSchema {
  label: string;
  prop: string;
  component: "Input" | "Text" | "Select" | "Radio" | "Checkbox";
  placeholder?: string;
  options?: { label: string; value: string | number }[];
  rules?: any[];
  style?: Record<string, string>;
  componentProps?: Record<string, any>;
}

const props = defineProps<{
  schema: FieldSchema[];
  modelValue: Record<string, any>;
  labelWidth?: string;
}>();

const emit = defineEmits(["update:modelValue", "submit"]);

const formRef = ref<FormInstance>();
const formModel = ref({ ...props.modelValue });

const rules: FormRules = {};
props.schema.forEach((field) => {
  if (field.rules) {
    rules[field.prop] = field.rules;
  }
});

const handleSubmit = () => {
  formRef.value?.validate((valid) => {
    if (valid) {
      emit("submit", formModel.value);
    }
  });
};

const handleReset = () => {
  formRef.value?.resetFields();
};
</script>
